<template>
	<view class="content reg-page">
		<view class="input-group">
			<view class="notice border-bottom-1px">
				<view class="status-info">
					<text class="yzb yzb-tixing"></text>
					<template v-if="formData.id">
						<text>认证状态：</text>
						<text class="status">{{formData.verifyStatus | formatStatus}}</text>
					</template>
					<template v-else>
						<text>温馨提示：</text>
						<text class="tip">资料认证通过方可展示在咨询师列表中！</text>
					</template>
				</view>
				<view class="status-info" v-if="formData.verifyStatus==2">
					<text class="status">{{formData.refuseReason}}</text>
				</view>
			</view>
			<view class="input-row border-bottom-1px" @click="uploadImg()">
				<view class="header">
					<text class="title">我的头像</text>
					<text class="tip">头像将出现在咨询师列表位置，最好上传职业照</text>
				</view>
				<view class="head-img"><image :src="formData.avatar || '/static/img/head.png'"></image></view>
			</view>
			<view class="input-column border-bottom-1px">
				<text class="title">真实姓名</text>
				<view class="input-item"><input class="padding-10" :disabled="disabled" placeholder="请输入真实姓名" v-model="formData.name" /></view>
			</view>
			<view class="input-column border-bottom-1px">
				<text class="title">拥有头衔</text>
				<view class="input-item"><input class="padding-10" :disabled="disabled" placeholder="请输入拥有头衔" v-model="formData.title" /></view>
			</view>
			<view class="input-column border-bottom-1px" @click="disabled == false">
				<text class="title">擅长类型</text>
				<view class="picker">
					<picker @change="bindTypeChange" :disabled="disabled" :value="formData.planType" range-key="name" :range="planTypes">
						<input class="padding-10" disabled="true" placeholder="请选择擅长类型" :value="formatType(formData.planType)" />
					</picker>
					<text class="yzb yzb-next"></text>
				</view>
			</view>
			<view class="input-column border-bottom-1px">
				<text class="title">擅长领域</text>
				<view class="input-item"><input class="padding-10" :disabled="disabled" placeholder="请输入擅长领域" v-model="formData.fields" /></view>
			</view>
			<view class="input-column border-bottom-1px">
				<text class="title">服务价格（元）</text>
				<view class="input-item"><input class="padding-10" :disabled="disabled" placeholder="请输入服务价格,每60分钟的价格" v-model="formData.price" /></view>
			</view>
			<view class="input-column border-bottom-1px">
				<text class="title">开始从业时间</text>
				<view class="picker">
					<picker mode="date" :value="formData.startYear" :start="workStart" :end="workEnd" @change="bindDateChange">
						<input class="padding-10" disabled="true" placeholder="请选择开始从业时间" :value="formData.startYear" />
					</picker>
					<text class="yzb yzb-next"></text>
				</view>
			</view>
			<view class="input-column border-bottom-1px">
				<text class="title">资质证书</text>
				<view class="input-item"><input class="padding-10" :disabled="disabled" placeholder="请输入资质证书" v-model="formData.certificate" /></view>
			</view>
			<view class="input-column border-bottom-1px"><text class="super-title">证书图片</text></view>
			<text class="padding-width-20 text-color-grey text-size-base">建议上传宽高比例2:1左右的图片，可上传证书等图片。</text>
			<view class="module-image border-bottom-1px" >
				<view class="image_view" v-for="(item, index) in ablumList" :key="index" v-if="ablumList.length > 0">
					<image :src="item" class="release_img" @click="previewImg(index)"></image>
					<view class="img_delete center-algin" @click="deleteImg(index)"><text class="text-white text-size-base text-color-inverse">X</text></view>
				</view>
				<view class="release_img center-algin release_img_dottedLine" @click="uploadImgs()" v-if="ablumList.length < 9"><text class="text-grey">+</text></view>
			</view>
			<view class="input-column border-bottom-1px">
				<text class="title">个人介绍</text>
				<view class="r-top">
					<textarea :auto-height="true" :disabled="disabled"  :maxlength="len" placeholder-style="color:rgba(153,153,153,1);" v-model="content" placeholder="请输入个人简介" />
					<view class="r-top-t">
						<view></view>
						<view>{{ contentLength }}/{{ len }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="btn-row row">
			<button type="primary" v-if="formData.id && formData.verifyStatus!=1" class="btn-save width-90" @tap="register">更新资料</button>
			<button type="primary" v-if="!formData.id" class="btn-save width-90" @tap="register">提交认证</button>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations, mapGetters } from 'vuex';
import { formatDate, calCurrentYear } from '@/common/date';
import uploadImage from '@/common/ossutil/uploadFile';
import formRuleConfig from '@/config/formRule.config.js';
import graceChecker from '@/common/graceChecker.js';
export default {
	computed: {
		...mapState(['userInfo']),

		startDate() {
			return this.getDate('start');
		},
		endDate() {
			return this.getDate('end');
		},
		workStart() {
			return this.getDate('work-start');
		},
		workEnd() {
			return this.getDate('work-end');
		},
		contentLength() {
			return this.content.length;
		}
	},
	
	filters: {
		//认证状态：1-待审核，2-审核失败，3-审核通过
		formatStatus(val) {
			if (val == 1) {
				return '认证审核中';
			} else if (val == 2) {
				return '认证失败';
			} else if (val == 3) {
				return '已认证';
			}
		}
	},
	
	data() {
		return {
			formData: {
				avatar: null,
				name: null,
				title:null,
				certificate:null,
				planType:null,
				fields:null,
				startYear:null,
				price:null,
				brief:null,
				album:""
			},
			query: {
				page: 1,
				limit: 20,
				keyword: ''
			},
			candidates: [],
			disabled: false,

			ablumList: [],
			imgList:[],
			content: '',
			len: 1500,
			planTypes:[],
			mediaType:0,
		};
	},
	created() {
	},
	onLoad(query) {
		console.log(query);
		this.initData();
	},
	methods: {
		
		async initData() {
			let data = await this.$apis.getDetail();
			if(data && data!=true){
				this.formData=data;
				if(data.album){
					this.ablumList=data.album.split(",");
				}
				if(data.verifyStatus==1){
					this.disabled=true;
				}
			}
			let postList = await this.$apis.getSysCategory({pcode:"B03"});
			this.planTypes=postList;
		},
		
		formatType(typeId){
			for (let item of this.planTypes) {
				if (item.id == typeId) {
					return item.name;
				}
			}
		},
		
		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();
			if (type === 'start') {
				year = year - 65;
			} else if (type === 'work-start') {
				year = year - 40;
			} else if (type === 'work-end') {
				// year = year;
			} else if (type === 'end') {
				year = year - 16;
			}
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			return `${year}-${month}-${day}`;
		},

		bindDateChange: function(e) {
			console.log('bindDateChange：', e);
			this.formData.startYear = e.target.value;
		},
		
		bindTypeChange: function(e) {
			console.log('bindTypeChange：', e);
			this.formData.planType = this.planTypes[e.target.value].id;
		},

		// 选择图片
		uploadImg() {
			if(this.disabled){
				return;
			}
			let that = this;
			uni.chooseImage({
				success(res) {
					let tempFilePaths = res.tempFilePaths;
					that.tmpImageUrl = tempFilePaths[0];
					that.uploadFile();
				}
			});
		},

		// 上传图片
		uploadFile() {
			uni.showLoading({
				title: '图片上传中'
			});
			uploadImage(0, this.tmpImageUrl, 'planer/', result => {
				console.log('图片上传结果：', result);
				this.formData.avatar = result;
				uni.hideLoading();
			});
		},
		
		// 选择图片
		uploadImgs() {
			if(this.disabled){
				return;
			}
			let that = this;
			this.cover = '';
			uni.chooseImage({
				count: 9 - that.ablumList.length,
				success(res) {
					console.log(res);
					console.log(res.tempFiles);
					let tmpFiles = res.tempFiles;
					let data = that.imgList;
					if (data.length < 9) {
						for (var i = 0; i < tmpFiles.length; i++) {
							data.push(tmpFiles[i].path);
						}
					} else {
						uni.showToast({
							icon: 'none',
							title: '最多只能有九张图片'
						});
						return;
					}
					that.imgList = data;
					that.uploadFiles();
				}
			});
		},
		
		// 上传图片
		uploadFiles() {
			uni.showLoading();
			for (var i in this.imgList) {
				uploadImage(0, this.imgList[i], 'planer/', result => {
					// console.log('图片上传结果：', result);
					// this.imageUrl = result;
					this.ablumList.push(result);
						
					if (this.imgList.length == this.ablumList.length) {
						// 图片上传完调用提交帖子
						// this.addPost();
					}
				});
			}
			this.imgList = [];
			uni.hideLoading();
			console.log('ablumList===', this.ablumList);
		},
		
		// 查看图片
		previewImg(index) {
			uni.previewImage({
				indicator: 'number',
				loop: true,
				current: this.ablumList[index],
				urls: this.ablumList
			});
		},
		
		// 删除图片
		deleteImg(index) {
			this.ablumList.splice(index, 1);
		},

		// 点击注册按钮
		async register() {
			let checkRes = graceChecker.check(this.formData, formRuleConfig.regPlanerRule);
			if (!checkRes) {
				uni.showToast({
					title: graceChecker.error,
					icon: 'none'
				});
				return;
			}
			if(this.ablumList.length==0){
				uni.showToast({
					title: "请上传轮播图",
					icon: 'none'
				});
				return;	
			}
			var img = '';
			for (var i in this.ablumList) {
				img += this.ablumList[i] + ',';
			}
			//去掉最后一个逗号
			if (img.length > 0) {
				img = img.substr(0, img.length - 1);
			}
			this.formData.album = img;
			let res = await this.$apis.addOrUpdatePlaner(this.formData);
			if (res) {
				uni.navigateBack({
					delta: 1
				});
			}
		},
	}
};
</script>

<style lang="scss" scoped>
.navbar {
	position: fixed;
	top: 0;
	width: 100%;
	background-color: $main-color;
	z-index: 99;
	align-items: center;
	display: flex;
	justify-content: center;
	text {
		color: #fff;
		font-size: $font-base-more;
	}
}
input {
	width: 90%;
}
.input-group {
	border-radius: 10upx;
	margin-top: 10upx;
	overflow: hidden;
	padding-bottom: 140upx;
}

.notice {
	display: flex;
	flex-direction: column;
	padding: 20upx;
	
	.status-info{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.reason{
		color:red;
	}
	.status{
		color:red;
	}
	.yzb-tixing {
		margin-right: 10upx;
		color: $uni-color-warning;
		font-weight: bold;
		font-size: $font-size-40;
	}
	.tip {
		color: $font-color-666;
	}
}

.input-row {
	display: flex;
	flex-direction: row;
	position: relative;
	background: #fff;
	justify-content: space-between;
	align-items: center;
	padding: 15upx 10upx;
}

.input-row .title {
	width: 25%;
	padding: 20upx 0;
	padding-left: 20upx;
	line-height: 50upx;
}

.border-bottom-1px {
	position: relative;
	&::after {
		position: absolute;
		z-index: 1;
		right: 0;
		bottom: 0;
		left: 20upx;
		right: 20upx;
		height: 1upx;
		content: '';
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		background-color: #e2e2e2;
	}
}

.header {
	display: flex;
	flex-direction: column;
	.tip {
		font-size: $uni-font-size-sm;
		color: $font-color-666;
		margin-left: 20upx;
	}
}

.head-img {
	margin-right: 15upx;
	image {
		width: 160upx;
		height: 160upx;
		border-radius: 50%;
	}
}

.input-column {
	display: flex;
	flex-direction: column;
	background-color: $bgcolor_white;
	padding: 30upx 20upx 10upx 20upx;

	.title {
		margin-left: 10upx;
	}

	.input-item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.picker {
		padding: 30upx 0;
		margin-left: 10upx;
		position: relative;
		picker {
			font-size: $uni-font-size-lg;
			width: 100%;
			position: absolute;
		}
	}
	.yzb-next {
		float: right;
		color: $font-color-999;
	}
}

.content {
	background: $bgcolor_white;
}

.btn-row {
	position: fixed;
	z-index: 999;
	bottom: 0upx;
	padding: 20upx;
	background-color: #ffffff;
	width: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	align-items: center;
	box-sizing: border-box;
	.btn-delete {
		background-color: $bg-grey;
		height: 80upx;
		line-height: 80upx;
		margin-right: 20upx;
		font-size: $font-size-34;
		color: $font-color-333;
		width: 30%;
	}

	.btn-save {
		background-color: $main-color;
		height: 80upx;
		line-height: 80upx;
		font-size: $font-size-34;
	}
	.width-55 {
		width: 55%;
	}

	.width-90 {
		width: 90%;
	}
}

textarea {
	// height: 600upx;
	width: 100%;
	font-size: $uni-font-size-base;
}
.r-top {
	margin-top: 20upx;
	padding: 10rpx;
	background: #ffffff;
	border-radius: 20rpx;
	height: 100%;
}
.r-top-t {
	display: flex;
	justify-content: space-between;
	font-family: PingFang SC;
	font-weight: 400;
	line-height: 20px;
	color: rgba(153, 153, 153, 1);
	opacity: 1;
}

.module-image {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	padding: 20upx 0;
	view {
		display: flex;
	}
}
.release_img {
	width: 220upx;
	height: 220upx;
	margin-left: 20upx;
	margin-bottom: 10upx;
}
.release_img_dottedLine {
	border: 1px dashed rgba(138, 138, 138, 1);
}
.release_img text {
	font-size: 50upx;
}
.release_img2 {
	width: 700upx;
	height: 450upx;
	margin-left: 20upx;
	margin-bottom: 10upx;
}

</style>
